.board-info {
    padding: 20px;
    overflow: hidden;
    background-color: rgb(var(--color-foreground));
    border-radius: 0.365vw 0.365vw 0.365vw 0.365vw;
    color: rgb(var(--color-title));

    :global {
        h1 {
            font-size: 24px;
            text-align: center;
            margin-bottom: 16px;
        }
        .info {
            padding-bottom: 1.563vw;
            border-bottom: 2px solid rgb(var(--color-border));
            .left {
                display: flex;
                gap: $gap-normal;
                .name {
                    @include font-size-large();
                }
                .img {
                    width: 50px;
                    height: 50px;
                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        border-radius: 50%;
                    }
                }

                .desc {
                    @include font-size-small();
                    color: rgb(var(--color-text));
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;

                    .my-divider {
                        height: 70%;
                        margin: 0 0.621vw;
                        rotate: 25deg;
                        align-self: center;
                    }

                    span:last-of-type {
                        color: rgb(70, 191, 88);
                    }
                }
            }
        }

        @media screen and ($phone) {
            padding: $gap-large;

            h1 {
                font-size: $large;
                margin-bottom: $gap-normal;
            }

            .info {
                padding-bottom: $gap-normal;

                .left {
                    gap: $gap-normal;

                    .desc {
                        gap: 2px;
                    }
                }
            }
        }
    }
}
